<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>首页 - 树状图统计</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!-- ace settings handler -->
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap-datetimepicker.min.css" />
<style>
.node {
  cursor: pointer;
}
.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}
.node text {
  font: 10px sans-serif;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}
.dFilter
{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color:Gray;
    left: 0px;
    top: 0px;
}
.dBody
{
    position: absolute;
    z-index: 1000;
    border: 2px solid #C4D9F6;
    background-color: white;
}
.dHeader
{
    //background-image: url(favicon.png);
    height: 20px;
    width: 100%;
    line-height: 20px;
}
.dHeaderEdit
{
    //background-image: url(favicon.png);
    height: 50px;
    width: 100%;
    line-height: 20px;
}
.dHeaderDel
{
    //background-image: url(favicon.png);
    height: 50px;
    width: 100%;
    line-height: 20px;
}
.dHeader label
{
    color: Black;
    float: left;
    font-weight: bold;
    margin-left: 5px;
    line-height:20px;
}
.dHeader img
{
    float: right;
    height:18px;
    width:18px;
    background-image: url(favicon.png);
}
.labelshow
{
    color: Black;
    float: left;
    font-weight: bold;
    margin-left: 5px;
    line-height:20px;
    height:10px;
    weight:30px;
}
.linetext {  
    font-size: 12px ;  
    font-family: SimSun;  
    fill:#0000FF;  
    fill-opacity:1.0;  
}  
</style>
	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="page-header">
				<h1>
					树状图统计
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i>
						流量统计
					</small>
				</h1>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box" style="margin-bottom: 0px; border-bottom: 0px;">
								<div class="widget-header widget-header-small">
									<h5 class="widget-title lighter">筛选条件</h5>
								</div>
								<div class="widget-body" style="background-color: #EFF3F8;">
									<div class="widget-main">
										<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/log/list">
										  	<div class="form-group">
										    	<label for="exampleInputName2">开始时间</label>
										    	<input type="text" class="form-control datetimepicker" id="beginDate" name="beginDate" value="${condition.beginDate!}" placeholder="查询开始时间">
										  	</div>
										  	<div class="form-group">
										    	<label for="exampleInputName2">结束时间</label>
										    	<input type="text" class="form-control datetimepicker" id="endDate" name="endDate" value="${condition.endDate!}" placeholder="查询结束时间">
										  	</div>
										  	<!-- <button id="search" type="button" class="btn btn-purple btn-sm" >
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												查询
											</button> 
											<button id="a" type="button" onclick="wwwwss()">
												查询
											</button>-->
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="treeShow" class="row">
					</div>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div>
<!-- basic scripts -->
		<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
		<script src="${rc.contextPath}/assets/js/wsh.js"></script>
		<script type="text/javascript">
			var message = "${message}";
			if(!isEmpty(message)) {
				showMsg(message);
			}
		</script>
		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>

		<!-- inline scripts related to this page -->
<script type="text/javascript">
jQuery(function($) {
	var options = {
					format:'YYYY-MM-DD'
				}
	$('.datetimepicker').datetimepicker(options).next().on(ace.click_event, function(){
		$(this).prev().focus();
	});
	initTreeJson_d3json();
})
function initTreeJson_ajax(){
	$.ajax({
			url: "${rc.contextPath}/message/QueryTreeStructure",
		   	dataType:"json",
		   	success: function(data){
				if(data!=null){
					root = data;
					root.x0 = height / 2;
					root.y0 = 0;
					function collapse(d) {
					    if (d.children) {
					    	d._children = d.children;
					      	d._children.forEach(collapse);
					      	d.children = null;
					    }
					}
					root.children.forEach(collapse);
					update(root);
			   }
		   }
	});
}

function initTreeJson_d3json(){
	d3.json("${rc.contextPath}/message/QueryTreeStructure", function(error, flare) {
		if (error) throw error;
		root = flare;
		root.x0 = height / 2;
		root.y0 = 0;
		function collapse(d) {
			if (d.children) {
	    		d._children = d.children;
	      		d._children.forEach(collapse);
	      		d.children = null;
	    	}
		}
		//root.children.forEach(collapse);
		update(root);
	});
}

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = 2000 - margin.right - margin.left,
    height = 800 - margin.top - margin.bottom;

var i = 0,duration = 750,root;
d3.rgb("decimal")
var tree = d3.layout.tree().size([height, width]);

var diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("div").append("svg")
     .attr("width", width + margin.right + margin.left)
     .attr("height", height + margin.top + margin.bottom)
   .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.select(self.frameElement).style("height", "800px");

function update(source) {
	// Compute the new tree layout.
   	var nodes = tree.nodes(root).reverse();
    var links = tree.links(nodes);

   	// Normalize for fixed-depth.
   	nodes.forEach(function(d) { d.y = d.depth * 180; });

   	// Update the nodes…
   	var node = svg.selectAll("g.node")
       	.data(nodes, function(d) { return d.id || (d.id = ++i); });

   	// Enter any new nodes at the parent's previous position.
   	var nodeEnter = node.enter().append("g")
    	.attr("class", "node")
       	.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; });

   	nodeEnter.append("circle")
       	.attr("r", 1e-6)
       	.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }).on("click", click);

   	nodeEnter.append("text")
       	.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
       	.attr("dy", ".35em")
       	.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
       	.text(function(d) { return d.nodeName; })
       	.style("fill-opacity", 1e-6)
       	.on("mousedown",showDiv)
       	.on("mouseout",function(d,i){
       					var children = document.getElementById("showDiv");
       					if(children){
       						document.body.removeChild(children);
       					}
       					//d3.select(this).transition().duration(500).attr("fill","red");
    	});

   	//nodeEnter.append("text")
	//	.attr("x", function(d) { return d.children || d._children ? 70 : 70; })
 	//	.attr("dy", ".35em")
 	//	.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
 	//	.text(function(d) { return (d.stcsPercentage==null?"":d.stcsPercentage)+"-"+(d.stcsCount==null?"":d.stcsCount); })
		//.style("fill-opacity", 1e-6);
   
   	// Transition nodes to their new position.
   	var nodeUpdate = node.transition()
       	.duration(duration)
       	.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

   	nodeUpdate.select("circle")
       	.attr("r", 4.5)
       	.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

   	nodeUpdate.select("text")
       	.style("fill-opacity", 1);

   	// Transition exiting nodes to the parent's new position.
   	var nodeExit = node.exit().transition()
       	.duration(duration)
       	.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
       	.remove();

   	nodeExit.select("circle")
       	.attr("r", 1e-6);

   	nodeExit.select("text")
       	.style("fill-opacity", 1e-6);

   	// Update the links…
   	var link = svg.selectAll("path.link")
       	.data(links, function(d) { return d.target.id; });

   	// Enter any new links at the parent's previous position.
  	link.enter().insert("path", "g")
       	.attr("class", "link")
       	.attr("d", function(d) {
         	var o = {x: source.x0, y: source.y0};
         	return diagonal({source: o, target: o});
       	})
       	.append("text").attr("class","linetext").text("sad");
  	  
   	// Transition links to their new position.
   	link.transition()
       	.duration(duration)
       	.attr("d", diagonal);

   	// Transition exiting nodes to the parent's new position.
   	link.exit().transition()
       	.duration(duration)
       	.attr("d", function(d) {
         	var o = {x: source.x, y: source.y};
         	return diagonal({source: o, target: o});
       	})
       	.remove();

   	// Stash the old positions for transition.
   	nodes.forEach(function(d) {
     	d.x0 = d.x;
     	d.y0 = d.y;
   	});
 }

// Toggle children on click.
function click(d) {
	if (d.children) {//缩小时调用
    	d._children = d.children;
     	d.children = null;
     	//update(d);
   	} else {//点击扩大时调用,通过父节点（即d节点）查询数据库
//		$.ajax({
// 			url: "${rc.contextPath}/message/ajaxDataTestAlias?stcsId="+d.stcsId,
// 		   	dataType:"json",
// 		   	success: function(data_children){
// 				if(data_children != null){
// 					d.children = d._children;
// 					d.children.forEach(function(e){
// 						var stcsId = e.stcsId;
// 					   	data_children.children.forEach(function(k){
// 							if(stcsId == k.stcsId){
// 								e.stcsPercentage = k.stcsPercentage;
// 							   	e.stcsCount = k.stcsCount;
// 						   	}
// 					   	})
// 					})
// 			     	d._children = null;
// 			     	update(d);
// 			   	}
// 		   	}
//		});
	 d.children = d._children;console.log(d.children);
   	 d._children = null;
	}
   	update(d);
}
//window.onload=function(){
//    document.onmousedown=function(ev){
//        var oEvent=ev||event;
//        var oDiv=document.createElement('div');
//        oDiv.style.left=oEvent.clientX+'px';  // 指定创建的DIV在文档中距离左侧的位置
//        oDiv.style.top=oEvent.clientY+'px';  // 指定创建的DIV在文档中距离顶部的位置
//        oDiv.style.border='1px solid #FF0000'; // 设置边框
//        oDiv.style.position='absolute'; // 为新创建的DIV指定绝对定位
//        oDiv.style.width='200px'; // 指定宽度
//        oDiv.style.height='200px'; // 指定高度
//        document.body.appendChild(oDiv); 
//    }
//}
function isEmpty(str) {
	if (str != null && str.length > 0) {
		return false;
	}
	return true;
}
function showDiv(ev){
	var beginDate = $("#beginDate").val();
	var endDate = $("#endDate").val();
	if(isEmpty(beginDate)){
		//showMsg("开始日期不能为空");
		//return false;
	}
	if(isEmpty(endDate)){
		//showMsg("结束日期不能为空");
		//return false;
	}
	$.ajax({
			url: "${rc.contextPath}/message/QueryDatabyNode?nodeId="+ev.nodeId+"&beginDate="+beginDate+"&endDate="+endDate,
		   	dataType:"json",
		   	success: function(data){
		   		console.log("结果");
		   		console.log(data);
				if(data != null){
					dataMess = data;
					var oEvent = ev || event;		console.log("oEvent...oEvent");console.log(oEvent);
				    var oDiv = document.createElement('div');
				    oDiv.setAttribute("id", "showDiv");
				    oDiv.setAttribute("style","background-color:#DDDDDD");
				    //oDiv.style.right = oEvent.clientX+'px';  // 指定创建的DIV在文档中距离左侧的位置
				    //oDiv.style.top = oEvent.clientY+'px';  // 指定创建的DIV在文档中距离顶部的位置
				    oDiv.style.left = oEvent.y+300+'px';
				    oDiv.style.top = oEvent.x+100+'px';
				    
				    oDiv.style.border = '1px solid #FFFFFF'; // 设置边框
				    oDiv.style.position = 'absolute'; // 为新创建的DIV指定绝对定位
				    oDiv.style.width = '150px'; // 指定宽度
				    oDiv.style.height = '200px'; // 指定高度
				    document.body.appendChild(oDiv);
				    for(var i=0;i<data.length;i++){
				    	var dLabel = $('<label class="labelshow">'+data[i]+'</label>').appendTo(oDiv);
				    	var br = $('<br></br>').appendTo(oDiv)
				    }
			   	}
		   	},
		   	error: function(XMLHttpRequest, textStatus, errorThrown){
		   		console.log("QueryDataByNode...error");console.log(errorThrown);
		   		var oEvent = ev || event;
		   	    var oDiv = document.createElement('div');
		   	    oDiv.setAttribute("id", "showDiv");
		   	    oDiv.style.right = 300+'px';
		   	    oDiv.style.top = 500+'px';
		   	    oDiv.style.border = '1px solid #FF0000'; // 设置边框
		   	    oDiv.style.position = 'absolute'; // 为新创建的DIV指定绝对定位
		   	    oDiv.style.width = '200px'; // 指定宽度
		   	    oDiv.style.height = '200px'; // 指定高度
		   	    document.body.appendChild(oDiv);
		   	    $('<label class="labelshow">'+"没有数据需要显示"+'</label>').appendTo(oDiv);
		   	}
	});
}
function blockDiv(ev){
	alert("43");
	console.log("blockDiv");
	console.log(ev);
	document.body.removeChild(document.getElementById("showDiv")); 
}
function QueryDatabyNode(d){
	//查询数据库得到此d节点下，可以允许增加的节点
	$(window).ShowDialog({
		nodeId: d.nodeId,
		width: 800, 
        height: 400, 
        title: "选择可以增加的节点",
        data: ""
    });
	
}
var Dialog = {
	    RemoveDialog: function() {
	        $("#dFilter").remove();
	        $("#dBody").remove();
	        Dialog.ShowSelect();
	    }
	}
	$(function() {
	    $.fn.extend({
	        ShowDialog: function(options) {
	            //插件内部函数
	            var nFun = {
	                HideSelect: function() {
	                    $("select").hide();
	                },
	                ShowSelect: function() {
	                    $("select").show();
	                },
	                RemoveDialog: function() {
	                    $("#dFilter").remove();
	                    $("#dBody").remove();
	                    nFun.ShowSelect();
	                },
	                CenterShow: function(dBody, width, height) {
	                    var topPX = 0;
	                    topPX = $(document.documentElement).height() - height;
	                    if (topPX < 0) {
	                        topPX = 0;
	                    } else {
	                        topPX = $(document.documentElement).scrollTop() + topPX / 2;
	                    }
	                    var leftX = $(document.documentElement).width() - width;
	                    if (leftX < 0) {
	                        leftX = 0;
	                    } else {
	                        leftX = $(document.documentElement).scrollLeft() + leftX / 2;
	                    }
	                    dBody.css({ "left": leftX + "px", "top": topPX + "px" });
	                }
	            }
	            var settings = {
	                height: 400, //弹出框的高度
	                width: 400, //弹出框的宽度
	                title: "标题", // 弹出框的标题
	                src: "", //弹出框的页面URL
	                data: "",
	                nodeId: "",
	                beforeShow: nFun.HideSelect, //在显示弹出框之前的方法
	                afterClose: nFun.ShowSelect //在关闭弹出框之后的方法
	            };
	            
	            if (options) {//合并值
	                $.extend(settings, options);
	            }
	            nFun.RemoveDialog();
	            settings.beforeShow();
	            //背影遮盖(是否为模式窗口)
	            var dFilter = $('<div id="dFilter" class="dFilter"></div>').appendTo(document.body);
	            dFilter.css("opacity", "0.5");
	            dFilter.css("height", $(document).height());
	            dFilter.css("width", $(document).width());
	            
	            //弹出页面的主DIV
	            var dBody = $('<div id="dBody" class="dBody"  ></div>').appendTo(document.body);
	            var dBodyHeight = settings.height + 20;
	            dBody.css({ "width": settings.width + "px", "height": dBodyHeight + "px" });
	            
	            //弹出页面的头部
	            var dHeader = $('<div class="dHeader" ></div>').appendTo(dBody);
	            //弹出页面的标题
	            var dTitle = $('<label id="'+i+'" value="'+i+'" onClick="aaa(this.value)"></label>').appendTo(dHeader);
	            dTitle.text(settings.title);
	            //弹出页面的关闭按钮
	            var dClose = $('<img alt="" />').appendTo(dHeader);
	            
	            
	            //弹出页面的可增加选项
	            var dHeaderEdit = $('<div class="dHeaderEdit" ></div>').appendTo(dBody);
	            for (var i=0;i<settings.data.length;i++){
	            	var dTitleEdit = $('<select id="'+i+'" value="'+i+'" onChange="selectValueEdit(this.value)"></select>').appendTo(dHeaderEdit);
	            	for (var k=0;k<settings.data[i].length;k++){
		            	//dTitleEdit.text(settings.title);
		            	dTitleEdit.append("<option value='"+settings.data[i][k].code+","+settings.data[i][k].describe+"'>"+settings.data[i][k].describe+"</option>");
					}
				}
				var dInput = $('<input id="treeNodeEdit" value="" disabled="disabled"></input>').appendTo(dHeaderEdit);
				var dHidden = $('<hidden id="treeNodeEditValue" value="" disabled="disabled"></hidden>').appendTo(dHeaderEdit);
				var dButton = $('<button id="treeNodeEdit" >确定</button>').appendTo(dHeaderEdit);
	            
				
				var dHeader2 = $('<div class="dHeader" ></div>').appendTo(dBody);
	            //弹出页面的标题
	            var dTitle2 = $('<label id="'+i+'" value="'+i+'" "></label>').appendTo(dHeader2);
	            dTitle2.text("删除此节点？");
	            //弹出页面的关闭按钮
	            //var dClose2 = $('<img alt="" />').appendTo(dHeader);
				
				
	            //删除此节点提示
	            var dHeaderDelete = $('<div class="dHeaderDel" ></div>').appendTo(dBody);
	            //弹出页面的标题
	            var dButtonDelete = $('<button id="treeNodeEdit">删除</button>').appendTo(dHeaderDelete);
	            
	            dButton.click(function(){
					var value = document.getElementById("treeNodeEditValue").value;
					nFun.RemoveDialog();
	              	settings.afterClose();
	              	EditTreeNode(settings.nodeId,value,"add");
				});
	            
	            dButtonDelete.click(function(){
					nFun.RemoveDialog();
	              	settings.afterClose();
	              	DeleteTreeNode(settings.nodeId,"del");
				});
	            
	            //弹出页面的内容容器iframe
	            var dIframe = $('<iframe frameborder="0"  ></iframe>');//.appendTo(dBody);
	            
	            //设置弹出框的宽高
	            var dIframeWidth = settings.width;
	            dIframe.attr({ "width": dIframeWidth + "px", "height": settings.height + "px", "src": settings.src });
	            
	            //设置弹出框居中显示
	            nFun.CenterShow(dBody, settings.width, settings.height);
	            //关闭按钮事件
	            dClose.click(function() {
	                nFun.RemoveDialog();
	                settings.afterClose();
	            });
	            $(window).resize(function() {
	                nFun.CenterShow(dBody, settings.width, settings.height);
	            });
	        }
	    });
	});

</script>
</body>
</html>